<template>
  <el-card class="cl-condition">
    <div class="cl-tree">
      <condition-tree
        :data="conditions"
        :indent="30"
        empty-text="暂无条件"
        node-key="id"
        :expand-on-click-node="false"
        default-expand-all
      >
       <span class="condition-tree-node" slot-scope="{ node, data }">

         <div class="content">
           <condition-popover v-if="node.data.logic" :ref="`popover-${node.data.id}-logic`" @show="show">
               <el-radio-group v-model="node.data.logic">
                <el-radio label="与">与</el-radio>
                <el-radio label="或">或</el-radio>
              </el-radio-group>

            <span slot="reference" class="children__logic">
              {{ node.data.logic }}
            </span>
           </condition-popover>
           <span v-else class="logic__space">&nbsp;</span>
           <form-popover :ref="`popover-${data.id}`" v-model="data" :condition-elements="conditionElements"
                         :current-node="node"
                         v-on:handle-submit-event="handleAddCondition">
                <el-button slot="reference" type="text" size="mini">{{ data.label }}</el-button>
             </form-popover>
           <condition-popover v-if="data.showChildrenLogic" :ref="`popover-${data.id}-children-logic`" @show="show">
               <el-radio-group v-model="data.childrenLogic">
                <el-radio label="与">与</el-radio>
                <el-radio label="或">或</el-radio>
              </el-radio-group>
                <span class="children__logic" slot="reference">{{ data.childrenLogic }}</span>
             </condition-popover>
         </div>
         <div class="toolbar">
           <el-tooltip class="item" effect="dark" content="添加子条件">
             <form-popover :ref="`popover-${data.id}-add`" :condition-elements="conditionElements" :current-node="node"
                           v-on:handle-submit-event="handleAddCondition">
               <el-button slot="reference" type="primary" plain size="mini"
                          icon="el-icon-circle-plus-outline" circle>
               </el-button>
               </form-popover>
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="删除条件">
           <el-button type="danger" plain size="mini" :disabled="data.children && data.children.length > 0"
                      @click="handleDeleteCondition(node, data)" icon="el-icon-remove-outline" circle>
           </el-button>
           </el-tooltip>
         </div>
       </span>
      </condition-tree>
      <form-popover ref="popover-add" :condition-elements="conditionElements"
                    v-on:handle-submit-event="handleAddCondition">
        <el-button slot="reference" type="primary" plain size="mini">添加主条件</el-button>
      </form-popover>
    </div>
  </el-card>
</template>

<script>
import util from "@/libs/util";

import ConditionTree from './tree/tree'
import FormPopover from "./form-popover";
import ConditionPopover from "./popover/main";

export default {
  name: "ConditionEditor",
  components: {ConditionPopover, FormPopover, ConditionTree},
  props: {
    // 条件初始值
    value: {
      type: Array,
      default: () => []
    },
    // 条件元素
    conditionElements: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      conditions: this.value,
      elVisible: false,
      radio: 3,

    }
  },
  provide() {
    return {getEditor: this.getEditor1}
  },
  mounted() {
  },
  methods: {

    /**
     *
     * @param data
     * @param node
     */
    handleAddCondition(data, node) {
      if (data.id) {
        node.data = data
      } else {
        const children = node ? node.data.children : this.conditions
        children.push(
          {id: util.uuid(9), ...data, children: [], childrenLogic: '与', ...children.length === 0 ? {} : {logic: '与'}}
        )
        this.updateLogic(node, 'add')
      }
    },
    // 打开弹出框关闭其他弹出框
    show(popover) {
      _.each(this.$refs, (ref, name) => {
        if (name.indexOf('popover-') > -1) {
          if (ref && ref !== popover) {
            if(ref.doClose){
              ref.doClose()
            }else {
              ref.$refs.popover.doClose();
            }
          }
        }
      })
    },
    /**
     *
     * @param node
     * @param data
     */
    handleDeleteCondition(node, data) {
      const children = node.parent.data.children || node.parent.data
      const index = children.findIndex(({id}) => id === data.id)
      if (index > -1) {
        children.splice(index, 1)
      }
      this.updateLogic((node.parent || node))
    },
    /**
     *
     * @param node
     * @param type
     */
    updateLogic(node, type) {
      if (node && node.data) {
        if (node.data.children && node.data.children.length === 0) {
          node.data.showChildrenLogic = false
        } else if (node.data) {
          if (node.data.length > 0 && node.data[0].logic) {
            const data = node.data[0]
            delete data.logic
            node.data[0] = _.clone(data)
          }
        }
        if (type === 'add') {
          if (!node.data.showChildrenLogic)
            node.data.showChildrenLogic = true
        }
      }
    },


    getEditor1() {
      return this
    }
  }


}
</script>

<style lang="scss">
.cl-condition {
  flex: 0.99;

  .cl-tree {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: self-start;

    .el-tree {
      flex: 0.96;

      .el-tree-node__expand-icon.is-leaf {
        margin-left: 12px;
      }

      .children__logic {
        cursor: pointer;
        color: #C0C4CC;
        font-size: 12px;
        margin-left: 6px;
      }
      .logic__space{
        margin-left: 17px;
      }

      .el-tree-node__content {
        height: 34px;

        &:hover .toolbar {
          display: block;
        }
      }

      .condition-tree-node {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;

        .content {
          flex: 0.8
        }

        .toolbar {
          display: none;

          .el-button:first-child {
            margin-right: 5px;
          }
        }
      }

      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);


      }
    }
  }
}
</style>
